<template>
  <div>
    <!-- 绑定反馈 -->
    <CommonDialog
      title="绑定反馈"
      width="75%"
      v-bind:dialogVisible="creatFeedDialogVisible"
      @on-change-dialogVisible="creatFeedChange"
      class="creatFeedForm"
      top="10vh"
    >
      <template #body>
        <el-form
          class="creatFeedForm"
          ref="creatFeedForm"
          :model="creatFeedForm"
          :rules="creatFeedFormRules"
          label-position="top"
          label-width="100"
        >
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="反馈ID" class="feedbackId" prop="feedBackId">
                <el-input
                  v-model.number="creatFeedForm.feedBackId"
                  placeholder="请输入反馈ID"
                  @input="changeIDs"
                ><el-button style="background: #409EFF;color:#fff;" slot="append" type="primary"  @click="searchIDforBug" icon="el-icon-search">查询</el-button> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="反馈标题" class="feedbackId" prop="feedBackId">
                <el-input
                  v-model="creatFeedForm.title"
                  placeholder="请输入反馈标题"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注">
                <socialUpload
                  :contentDefault="creatFeedForm.feedBackReason"
                  @getContent="getUpdateContent"
                ></socialUpload>
                <!-- <vue-tinymce v-model="creatFeedForm.feedBackReason"
                             :setting="setting" /> -->
                <!-- <quill-editor
                  v-model="creatFeedForm.feedBackReason"
                  ref="feedBackReasonEditor"
                >
                </quill-editor> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #dialog_footer>
        <el-button class="submitCancel" @click="creatFeedCancel">取 消</el-button>
        <el-button type="primary" @click="confirmbinding('creatFeedForm')" class="submitReme" :disabled="isClick"
          >确认</el-button
        >
      </template>
    </CommonDialog>
  </div>
</template>

<script>
import socialUpload from '../socialUpload/socialUpload.vue'
import CommonDialog from '@/components/commonDialog/commonDialog.vue'
// import { taskPandect } from "@/api/tasks/server";
import { FeedBack } from '@/api/feedBack/server'
export default {
    name: '',
    components: {
        CommonDialog,
        socialUpload
    },
    props: {},
    data() {
        return {
            isClick: true,
            // 控制绑定反馈弹出框的显示和隐藏
            creatFeedDialogVisible: false,
            tableItemsId: '',
            creatFeedForm: {
                feedBackId: null,
                feedBackReason: null,
                title: ''
            },
            creatFeedFormRules: {
                feedBackId: [{ required: true, message: 'ID不能为空', trigger: 'blur' },
                    { type: 'number', message: 'ID必须为数字值', trigger: 'change' }],
                feedBackReason: [{ required: true, message: '请输入备注', trigger: 'change' }]
            }
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        show(id) {
            this.tableItemsId = id
            this.creatFeedDialogVisible = true
            this.isClick = true
        },
        changeIDs() {
            this.isClick = true
        },
        creatFeedCancel() {
            this.creatFeedDialogVisible = false
            this.$refs['creatFeedForm'].resetFields()
            this.creatFeedForm = {
                feedBackId: null,
                feedBackReason: null,
                title: ''
            }
        },
        creatFeedChange(val) {
            this.creatFeedDialogVisible = val
            this.$refs['creatFeedForm'].resetFields()
            this.creatFeedForm = {
                feedBackId: null,
                feedBackReason: null,
                title: ''
            }
        },
        // 确认绑定
        confirmbinding(formName) {
            const objParams = {
                id: this.tableItemsId,
                linkFeedBackNumber: this.creatFeedForm.feedBackId,
                operation: 0,
                reason: this.creatFeedForm.feedBackReason
            }
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.binding(objParams)
                    this.$refs[formName].resetFields()
                } else {
                    this.$message.error('请检查表单信息是否填写完整')
                    return false
                }
            })
        },
        // 绑定反馈
        async binding(params) {
            try {
                const result = await FeedBack.LinkFeedBackOperationAsync(params)
                if (result.success) {
                    this.creatFeedDialogVisible = false
                    this.creatFeedForm = {
                        feedBackId: null,
                        feedBackReason: null,
                        title: ''
                    }
                    // this.$router.go(0)
                    this.$emit('refreshPage')
                } else {
                    this.$message.error(result.message)
                    this.creatFeedDialogVisible = false
                }
            } catch (error) {
                console.log(error)
            }
        },
        searchIDforBug() {
            this.onClickblur()
        },
        async onClickblur() {
            const arr = {
                id: this.tableItemsId,
                linkFeedBackNumber: this.creatFeedForm.feedBackId
            }
            try {
                const result = await FeedBack.FeedBackBindingJudgeAsync(arr)
                if (result.success) {
                    this.isClick = false
                    this.creatFeedForm.title = result.data
                    this.$message.success(result.message)
                } else {
                    this.isClick = true
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.isClick = true
                console.log(err)
            }
        },
        getUpdateContent(Value) {
            this.creatFeedForm.feedBackReason = Value
        }
    }
}
</script>

